<!-- 
*	rich-text -  坑，写完了才发现没有点击事件，需要使用uParse插件
* 	难点，字符串先使用换行符切割，数组每一项都使用正则判断，递归来替换成自己想要的格式 
*  -->

<template>
	<scroll-view class="comment-wrap"
		scroll-y="true"
		lower-threshold="10"
		@scrolltolower="onScrolltolower"
	>
		<view class="comment-content">
			<view class="comment-item" v-for="(item, index) in event" :key="index">
				<view class="avatar">
					<image class="avatar-img" :src="item.avatarUrl"></image>
					<image class="little-img" :src="item.littleImg"></image>	
				</view>
				<view class="content">
					<view class="title">
						<view class="user">
							<view class="user-top">
								<text class="username">{{item.username}} </text>
								<text class="type">{{item.typeDesc}}</text>
							</view>
							<text class="fans">{{item.userReason}}</text>
						</view>
						<view class="follow">
							<text class="add-btn"></text>
							<text>关注</text>
						</view>
					</view>
					<view class="msg">
						<!-- <rich-text :nodes="item.msg"></rich-text> -->
						<u-parse :content="item.msg" @preview="preview" @navigate="navigate" />
					</view>
					<view class="pics-wrap">
						<view 
							class="pic"
							:class="{
								'pic-3': item.pics.length % 3 === 0 || item.pics.length === 5 || item.pics.length === 7,
								'pic-8': item.pics.length === 8,
								'pic-4': item.pics.length === 4 || item.pics.length === 2,
							}"
							v-if="item.pics.length > 1"
							v-for="(p,i) in item.pics"
							:key="i"
						>
							<image @tap="previewImg(p, item.pics)" class="pic-img" :src="p.pcSquareUrl"></image>
							<text v-if="p.height / p.width >= 2" class="pic-long">长图</text>
						</view>
						<view v-if="item.pics.length === 1" :style="{width: '200rpx', height: (200 * item.pics[0].height / item.pics[0].width) + 'rpx'}">
							<image @tap="previewImg(item.pics[0], item.pics)" class="pic-img" :src="item.pics[0].originUrl"></image>
						</view>
					</view>
					<view class="song" v-if="item.song && JSON.stringify(item.song) !== '{}'">
						<view class="img">
							<img class="picUrl" :src="item.song.picUrl_img" alt="">
							<view class="play-btn"></view>
						</view>
						<view class="text">
							<view class="name">{{item.song.name}}</view>
							<view class="artist">{{item.song.artist_name}}</view>
						</view>
					</view>
					<view class="video" v-if="item.video && JSON.stringify(item.video) !== '{}'">
						<img class="image" v-lazy="item.video.coverUrl" />
						<view class="play-btn"></view>
						<view class="icons">
							<view class="play-count">
								<text class="triangle"></text>
								<text class="count">{{item.video.playTime}}</text>
							</view>
							<view class="time">
								<text class="play"></text>
								<text class="count">{{item.video.duration_desc}}</text>
							</view>
						</view>
					</view>
					<view class="video" v-if="item.mv && JSON.stringify(item.mv) !== '{}'">
						<img class="image" v-lazy="item.mv.imgurl" />
						<view class="play-btn"></view>
						<view class="icons">
							<view class="play-count">
								<text class="triangle"></text>
								<text class="count">{{item.mv.playCount}}</text>
							</view>
							<view class="time">
								<text class="play"></text>
								<text class="count">{{item.mv.duration_desc}}</text>
							</view>
						</view>
					</view>
					<view class="song" v-if="JSON.stringify(item.program) !== '{}' && item.program && item.program.radio">
						<view class="img">
							<img class="picUrl" :src="item.program.radio.picUrl" alt="">
						</view>
						<view class="text">
							<view class="name">{{item.program.name}}</view>
							<view class="artist"><text class="label">{{item.program.radio.category}}</text>{{item.program.radio.name}}</view>
						</view>
					</view>
					<view class="song" v-if="JSON.stringify(item.playlist) !== '{}' && item.playlist && item.playlist.creator">
						<view class="img">
							<img class="picUrl" :src="item.playlist.coverImgUrl" alt="">
						</view>
						<view class="text">
							<view class="name"><text class="label">歌单</text>{{item.playlist.name}}</view>
							<view class="artist">by {{item.playlist.creator.nickname}}</view>
						</view>
					</view>
					<view class="song" v-if="JSON.stringify(item.album) !== '{}' && item.album">
						<view class="img">
							<img class="picUrl" :src="item.album.picUrl" alt="">
						</view>
						<view class="text">
							<view class="name">{{item.album.name}}</view>
							<view class="artist">{{(item.album.artists||[]).map(t=>t.name).join('/')}}</view>
						</view>
					</view>
					<view class="song" v-if="item.resource && JSON.stringify(item.resource) !== '{}'">
						<view class="img">
							<img class="picUrl" :src="item.resource.picUrl" alt="">
						</view>
						<view class="text">
							<view class="name">歌手: {{item.resource.name}}</view>
						</view>
					</view>
					<view class="actions">
						<view class="counts">
							<view class="like">
								<text class="iconfont icon-share"></text>
								<text class="like-count">{{item.info.shareCount}}</text>
							</view>
							<view class="like">
								<text class="iconfont icon-comment"></text>
								<text class="comment-count">{{item.info.commentCount}}</text>
							</view>
							<view class="comment">
								<text class="iconfont icon-like-kong"></text>
								<text class="like-count">{{item.info.likedCount}}</text>
							</view>
						</view>
						<view class="more-btn-wrap">
							<text class="more-btn"></text>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="nomore" v-if="!hasMore">
			<text>没有更多了...</text>
		</view>
	</scroll-view>
</template>

<script>
	import { renderTime } from "@/common/utils.js";
	import musicImg from "@/static/imgs/main/music.png";
	import videoImg from "@/static/imgs/main/video.png";
	
	import uParse from '@/components/un-parse/u-parse.vue'
	export default {
		components: { uParse },
		data() {
			return {
				lastTime: -1,
				hasMore: true,
				event: [],
				OK: true,
			}
		},
		beforeMount() {
			this.getComment();
		},
		methods: {
			update(callback) {
				this.lastTime = -1;
				this.hasMore = true;
				this.getComment('update');
				setTimeout(() => {
					callback && callback();
					uni.stopPullDownRefresh();
					uni.showToast({
						title: '发现了更多有趣内容',
						icon: 'none',
						mask: false,
						duration: 1500,
					});
				}, 1000)
			},
			getComment(type) {
				if (!this.hasMore) return
				if (!this.OK) return
				this.OK = false;
				this.$request('/event', {
					pagesize: 10,
					lasttime: this.lastTime
				}).then((res) => {
					this.OK = true;
					this.lastTime = res.lasttime;
					this.hasMore = res.more;
					let arr = res.event.map((t) => {
						let json = JSON.parse(t.json);
						let littleImg = musicImg;
						let type = '';
						let typeDesc = '';
						let song = {};
						let video = {};
						let album = {};
						let playlist = {};
						let mv = {};
						let program = {};
						let resource = {};
						if (json.song) {
							littleImg = musicImg;
							type = 'song';
							typeDesc = '分享单曲';
							song = json.song;
							song.artist_name = json.song.artists[0].name;
							song.picUrl_img = json.song.artists[0].picUrl;
						}
						if (json.video) {
							littleImg = videoImg;
							type = 'video';
							typeDesc = '发布视频';
							video = json.video;
							video.duration_desc = renderTime(json.video.durationms);
						}
						if (json.album) {
							littleImg = videoImg;
							type = 'album';
							typeDesc = '分享专辑';
							album = json.album;
							album.username = t.user.nickname;
						}
						if (json.playlist) {
							littleImg = musicImg;
							type = 'playlist';
							typeDesc = '分享歌单';
							playlist = json.playlist;
						}
						if (json.mv) {
							littleImg = musicImg;
							type = 'mv';
							typeDesc = '分享MV';
							mv = json.mv;
							mv.duration_desc = renderTime(json.mv.duration);
						}
						if (json.program) {
							littleImg = musicImg;
							type = 'program';
							typeDesc = '分享电台节目';
							program = json.program;
						}
						if (json.resource) {
							littleImg = videoImg;
							type = 'resource';
							typeDesc = '分享歌手';
							resource = json.resource;
						}
						let msg = json.msg || '';
						if (json.text && json.text.length) {
							msg = json.text.join('\n');
						}
						let nodes = this.tranNodes1(msg);
						return {
							username: t.user.nickname,
							avatarUrl: t.user.avatarUrl,
							littleImg,
							userReason: t.rcmdInfo ? t.rcmdInfo.userReason : '',
							msg: nodes,
							type,
							typeDesc,
							song,
							video,
							album,
							playlist,
							mv,
							program,
							resource,
							pics: t.pics,
							info: t.info,
						}
					})
					if (type === 'update') {
						this.event = arr;
					} else {
						this.event = this.event.concat(arr);
					}
				}).catch(err=>{
					this.OK = true;
					uni.hideLoading();
					console.log(err)
				});
			},
			tranNodes1(msg) {
				if (!msg) return '<span></span>';
				let str = '';
				let arr = msg.split('\n');
				arr.forEach((t) => {
					var reg1 = /(@[^\s]*)/;
					var reg2 = /(#[^#]*#)/;
					var reg3 = /([http|https][^\s]*)/;
					if (reg1.test(t) || reg2.test(t) || reg3.test(t)) {
						var child = this.tran1(t);
						str += `<div class="msg-text">${child}</div>`;
					} else {
						str += `<div class="msg-text">${t}</div>`;
					}
				});
				return str;
			},
			tran1(str) {
				if (!str) return '';
				if (/(@[^\s]*)/.test(str)) {
					var left = str.split(RegExp.$1)[0];
					var text = RegExp.$1;
					var right = str.split(RegExp.$1)[1];
					var str = '';
					str += `${left}<a href="${text}" class="span-1">${text}</a>`;
					str += this.tran1(right);
					return str;
				} else if (/(#[^#]*#)/.test(str)) {
					var left = str.split(RegExp.$1)[0];
					var text = RegExp.$1;
					var right = str.split(RegExp.$1)[1];
					var str = '';
					str += `${left}<a href="${text}" class="span-2">${text}</a>`;
					str += this.tran1(right);
					return str;
				} else if (/((http|https)[^\s]*)/.test(str)) {
					var left = str.split(RegExp.$1)[0];
					var text = RegExp.$1;
					var right = str.split(RegExp.$1)[1];
					var str = '';
					str += `${left}<a href="${text}" class="span-3"> # 网页链接</a>`;
					str += this.tran1(right);
					return str;
				} else {
					return str;
				}
			},
			onScrolltolower() {
				this.getComment();
			},
			previewImg(cur, list) {
				let current = cur.originUrl || cur.pcSquareUrl;
				let arr = list.map(t => t.originUrl || t.pcSquareUrl);
				uni.previewImage({
					current: current,
					urls: arr,
					indicator: 'number',
					loop: true,
					longPressActions: {
						itemList: arr
					}
				});
			},
			preview(src, e) {
				console.log(src, e);
			},
			navigate(href, e) {
				// 在h5中 e为undefined。
				console.log(href, e);
			},
		}
	}
</script>

<style lang="scss">
	.comment-wrap{
		width: 100%;
		height: 100%;
		position: relative;
		.comment-content{
			width: 100%;
			.comment-item{
				border-top: 1px solid #eee;
				width: 100%;
				box-sizing: border-box;
				padding: 40upx 40upx 40upx 140upx;
				position: relative;
				.avatar{
					width: 80upx;
					height: 80upx;
					position: absolute;
					left: 40upx;
					top: 40upx;
					.avatar-img{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					.little-img{
						width: 30upx;
						height: 30upx;
						border-radius: 50%;
						position: absolute;
						right: -5upx;
						bottom: 0;
					}
				}
				.content{
					.title{
						height: 80upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.user{
							line-height: 40upx;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							.user-top{
								overflow: hidden;
								width: 100%;
								text-overflow: ellipsis;
								white-space: nowrap;
								.username{
									font-size: 28upx;
									color: #1d72f0;
								}
								.type{
									font-size: 28upx;
									color: #777;
								}
							}
							.fans{
								font-size: 20upx;
								color: #555;
							}
						}
						.follow{
							float: right;
							color: #fff;
							width: 160upx;
							height: 50upx;
							border-radius:50upx;
							background-color: #fc3939;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 22upx;
							.add-btn{
								margin-right: 10upx;
								@include add-btn(20upx, #fff);
							}
						}
					}
					.msg{
						padding: 10upx 0;
						.msg-text{
							font-size: 30upx;
							color: #777;
							line-height: 40upx;
							.span-1, .span-2, .span-3{
								color: #397bdd;
							}
						}
					}
					.pics-wrap{
						width: 100%;
						font-size: 0;
						.pic{
							position: relative;
							.pic-long{
								position: absolute;
								right: 10upx;
								bottom: 10upx;
								padding: 6upx 10upx;
								border-radius: 20upx;
								font-size: 20upx;
								color: #fff;
								border: 1px solid #fff;
							}
						}
						.pic-8{
							width: 136upx;
							height: 136upx;
							display: inline-block;
							margin: 0 8upx 8upx 0;
							&:nth-child(4n) {
								margin-right: 0;
							}
						}
						.pic-4{
							width: 260upx;
							height: 260upx;
							display: inline-block;
							margin: 0 9upx 9upx 0;
						}
						.pic-3{
							width: 185upx;
							height: 185upx;
							display: inline-block;
							margin: 0 9upx 9upx 0;
							&:nth-child(3n) {
								margin-right: 0;
							}
						}
						.pic-1{
							width: 300upx;
							height: 300upx;
						}
						.pic-img{
							width: 100%;
							height: 100%;
							border-radius: 12upx;
						}
					}
					.song{
						margin-top: 10upx;
						border-radius: 10upx;
						box-sizing: border-box;
						background-color: #f2f2f2;
						padding: 10upx;
						width: 100%;
						display: flex;
						.label{
							color: #fc3939;
							border: 1px solid #fc3939;
							border-radius: 4upx;
							font-size: 16upx;
							padding: 0upx 4upx;
							margin-right: 6upx;
						}
						.img{
							width: 60upx;
							height: 60upx;
							position: relative;
							.picUrl{
								border-radius: 10upx;
								width: 100%;
								height: 100%;
							}
							.play-btn{
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								@include play-btn(40upx);
							}
						}
						.text{
							margin-left: 10upx;
							flex:1;
							width: calc(100% - 70upx);
							display: flex;
							flex-direction: column;
							justify-content: center;
							.name,.artist{
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.name{
								font-size: 24upx;
								line-height: 36upx;
								color: #777;
							}
							.artist{
								font-size: 20upx;
								line-height: 1;
								color: #999;
							}
						}
					}
					.video{
						width: 100%;
						height: 300upx;
						position: relative;
						.image{
							width: 100%;
							height: 100%;
							border-radius: 10upx;
						}
						.play-btn{
							@include triangle(30upx, rgba(255,255,255,0.8));
							position:absolute;
							left: 50%;
							top: 50%;
							transform: translate(-45%,-50%);
						}
						.icons{
							position: absolute;
							left: 0;
							bottom: 10upx;
							width: 100%;
							height: 30upx;
							padding: 0 20upx;
							box-sizing: border-box;
							line-height: 30upx;
							color: #fff;
							font-size: 24upx;
							display: flex;
							justify-content: space-between;
							.count{
								margin-left: 6upx;
							}
							.triangle{
								@include triangle();
							}
							.play-count{
								display: flex;
								align-items: baseline;
							}
							.time{
								display: flex;
								align-items: baseline;
								.play{
									@include play();
								}
							}
						}
					}
					.actions{
						width: 100%;
						margin: 0 auto;
						height: 80upx;
						display: flex;
						justify-content: space-between;
						.counts{
							line-height: 80upx;
							.like, .comment{
								display: inline-block;
								font-size: 24upx;
								color: #777;
								.iconfont{
									margin-right: 6upx;
									font-size: 28upx;
									vertical-align: middle;
								}
							}
							.like{
								margin-right: 50upx;
							}
						}
						.more-btn-wrap{
							width: 20upx;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							.more-btn{
								@include more-btn(#333);
							}
						}
					}
				}
			}
		}
	}
	.loading, .nomore{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		text-align: center;
	}
</style>
